<template>
    <div class="graph-box">
        <div class="tabs-box">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="大纲模式" name="0"></el-tab-pane>
                <el-tab-pane label="图谱模式" name="1"></el-tab-pane>
                <el-tab-pane label="导图模式" name="2"></el-tab-pane>
                <!-- <el-tab-pane label="树状模式" name="3"></el-tab-pane> -->
                <!-- <el-tab-pane label="网状模式" name="4"></el-tab-pane> -->
            </el-tabs>
            <div class="outline-box" v-if="outlineShow">
                <div v-for="(chapter, index) in courseGraphList" :key="chapter.id" class="chapter-list">
                    <el-collapse v-model="activeOutline" accordion @change="openOutline(index)">
                        <el-collapse-item :name="index">
                            <template #title>
                                <div class="outline-title chapter">
                                    <div class="chapter-left">
                                        <el-icon v-if="!isChapterActive(index)">
                                            <CaretRight />
                                        </el-icon>
                                        <el-icon v-if="isChapterActive(index)">
                                            <CaretBottom />
                                        </el-icon>
                                        <div class="chapter-icon">章</div>
                                        <div class="chapter-title">{{ chapter.depart_name }}</div>
                                    </div>
                                    <div class="chapter-right">
                                        <el-button class="addpeer" @click.stop="addChapter">
                                            <img src="@/assets/addpeer.png" alt="">
                                            <span>同级</span>
                                        </el-button>
                                        <el-button class="addchild" @click.stop="addSection(chapter.id)">
                                            <img src="@/assets/addchild.png" alt="">
                                            <span>子级</span>
                                        </el-button>
                                        <el-button class="edit" @click.stop="editChapter(chapter)">
                                            <img src="@/assets/edit.png" alt="">
                                            <span>编辑</span>
                                        </el-button>
                                        <el-button class="dele" @click.stop="deleteIem(chapter.id)">
                                            <img src="@/assets/dele.png" alt="" >
                                            <span>删除</span>
                                        </el-button>
                                    </div>
                                </div>
                            </template>
                            <el-collapse v-model="innerActiveNames" accordion v-for="section in chapter.sections"
                                :key="section.id">
                                <el-collapse-item name="inner-1">
                                    <template #title>
                                        <div class="outline-title section">
                                            <div class="chapter-left">
                                                <el-icon v-if="!isSectionActive(index, sectionIndex)">
                                                    <CaretRight />
                                                </el-icon>
                                                <el-icon v-if="isSectionActive(index, sectionIndex)">
                                                    <CaretBottom />
                                                </el-icon>
                                                <div class="chapter-icon">节</div>
                                                <div class="chapter-title">{{ section.depart_name }}</div>
                                            </div>
                                            <div class="chapter-right">
                                                <el-button class="addpeer" @click.stop="addSection(chapter.id)">
                                                    <img src="@/assets/addpeer.png" alt="">
                                                    <span>同级</span>
                                                </el-button>
                                                <el-button class="addpoint" @click.stop="addPoint(section.id)">
                                                    <img src="@/assets/addpoint.png" alt="">
                                                    <span>知识点</span>
                                                </el-button>
                                                <el-button class="edit" @click.stop="editSection(section)">
                                                    <img src="@/assets/edit.png" alt="">
                                                    <span>编辑</span>
                                                </el-button>
                                                <el-button class="dele" @click.stop="deleteIem(section.id)">
                                                    <img src="@/assets/dele.png" alt="">
                                                    <span>删除</span>
                                                </el-button>
                                            </div>
                                        </div>
                                    </template>
                                    <div class="outline-title point" v-for="knowledge in section.knowledges"
                                        :key="knowledge.id">
                                        <div class="chapter-left">
                                            <div class="chapter-icon">{{
                                                knowledge.depart_name }}</div>
                                            <!-- <div class="chapter-icon orange" v-if="knowledge.target_type">{{
                                                knowledge.target_type }}</div> -->
                                            <!-- <div class="chapter-icon orange">重点</div>
                                            <div class="chapter-icon orange">重点</div>
                                            <div class="chapter-title">产品结构设计基础</div> -->
                                        </div>
                                        <div class="chapter-right">
                                            <el-button class="edit">
                                                <img src="@/assets/edit.png" alt="" @click.stop="editPoint(knowledge)">
                                                <span>编辑</span>
                                            </el-button>
                                            <el-button class="dele" @click.stop="deleteIem(knowledge.id)">
                                                <img src="@/assets/dele.png" alt="">
                                                <span>删除</span>
                                            </el-button>
                                        </div>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </div>
            <GraphView v-if="graphShow" />
            <ThreeView v-if="threeShow" />
            <el-dialog v-model="dialogShow" :title="dialogTitle" width="50%" top="20vh">
                <div class="dialog-content" v-if="chapterShow">
                    <div class="form-list">
                        <div class="form-item">
                            <div class="items">
                                <div class="text">章名称</div>
                                <div class="reds">*</div>
                            </div>
                            <div class="inputs">
                                <el-input v-model="saveChapterParams.depart_name" placeholder="请输入名称" />
                            </div>
                        </div>
                        <div class="form-item">
                            <div class="items">
                                <div class="text">对应课程目标</div>
                                <div class="reds">*</div>
                            </div>
                            <div class="inputs">
                                <el-select v-model="saveChapterParams.target_id" class="m-2" placeholder="请选择对应课程目标">
                                    <el-option v-for="item in courseTargetList" :key="item.id"
                                        :label="item.cultivateTarget" :value="item.id" />
                                </el-select>
                            </div>
                        </div>
                    </div>
                    <div class="form-list">
                        <div class="form-item">
                            <div class="items">
                                <div class="text">教学方式</div>
                                <div class="reds">*</div>
                            </div>
                            <div class="inputs">
                                <el-select v-model="saveChapterParams.teaching_mode" class="m-2" placeholder="请选择教学方式">
                                    <el-option v-for="item in teachingModes" :key="item.key" :label="item.value"
                                        :value="item.key" />
                                </el-select>
                            </div>
                        </div>
                        <div class="form-item">
                            <div class="items">
                                <div class="text">学时</div>
                                <div class="reds">*</div>
                            </div>
                            <div class="inputs class-hour">
                                <el-input-number v-model="saveChapterParams.hours" :min="1" :max="99"
                                    @change="handleChange" />
                                <!-- <span>剩余未分配学时：1.5</span> -->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="dialog-content" v-if="sectionShow">
                    <div class="form-list">
                        <div class="form-item">
                            <div class="items">
                                <div class="text">节名称</div>
                                <div class="reds">*</div>
                            </div>
                            <div class="inputs">
                                <el-input v-model="saveSectionParams.depart_name" placeholder="请输入节名称" />
                            </div>
                        </div>
                        <div class="form-item">
                            <div class="items">
                                <div class="text">教学方式</div>
                                <div class="reds">*</div>
                            </div>
                            <div class="inputs">
                                <el-select v-model="saveSectionParams.teaching_mode" class="m-2" placeholder="请选择教学方式">
                                    <el-option v-for="item in teachingModes" :key="item.key" :label="item.value"
                                        :value="item.key" />
                                </el-select>
                            </div>
                        </div>
                    </div>
                    <div class="form-list">
                        <div class="form-item">
                            <div class="items">
                                <div class="text">对应课程目标</div>
                                <div class="reds">*</div>
                            </div>
                            <div class="inputs">
                                <el-select v-model="saveSectionParams.target_id" class="m-2" placeholder="请选择对应课程目标">
                                    <el-option v-for="item in courseTargetList" :key="item.id"
                                        :label="item.cultivateTarget" :value="item.id" />
                                </el-select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="dialog-content" v-if="pointShow">
                    <div class="form-list">
                        <div class="form-item">
                            <div class="items">
                                <div class="text">知识点名称</div>
                                <div class="reds">*</div>
                            </div>
                            <div class="inputs">
                                <el-input v-model="savePointParams.depart_name" placeholder="请输入知识点名称" />
                            </div>
                        </div>
                        <!-- <div class="form-item">
                            <div class="items">
                                <div class="text">前置知识点</div>
                            </div>
                            <div class="inputs">
                                <el-select v-model="value" class="m-2" placeholder="请选择前置知识点">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </div>
                        </div> -->
                        <div class="form-item">
                            <div class="items">
                                <div class="text">思政点标识</div>
                                <div class="reds">*</div>
                            </div>
                            <div class="class-switch">
                                <div class="slider" :class="{ 'mode-1': politics === 0, 'mode-2': politics === 1 }"
                                    :style="politicsStyle"></div>
                                <div class="switch-item" :class="{ active: politics === 0 }"
                                    @click="deologicalTargetChange(0)">知识点
                                </div>
                                <div class="switch-item" :class="{ active: politics === 1 }"
                                    @click="deologicalTargetChange(1)">思政点
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-list">
                        <div class="form-item">
                            <div class="items">
                                <div class="text">对应课程目标</div>
                                <div class="reds">*</div>
                            </div>
                            <div class="inputs">
                                <el-select v-model="savePointParams.target_id" class="m-2" placeholder="请选择对应课程目标">
                                    <el-option v-for="item in courseTargetList" :key="item.id"
                                        :label="item.cultivateTarget" :value="item.id" />
                                </el-select>
                            </div>
                        </div>
                        <!-- <div class="form-item">
                            <div class="items">
                                <div class="text">知识点类型</div>
                                <div class="reds">*</div>
                            </div>
                            <div class="inputs">
                                <el-select v-model="value" class="m-2" placeholder="请选择知识点类型">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </div>
                        </div> -->
                    </div>
                </div>
                <div class="form-list" style="margin-top: 10px;">
                    <div class="text" style="text-align: left;padding-left: 10px;">{{ editorTitle }}</div>
                    <div class="inputs">
                        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef"
                            :defaultConfig="toolbarConfig" :mode="mode" />
                        <Editor style="height: 260px;text-align: left;" v-model="saveChapterParams.desc"
                            :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
                    </div>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogShow = false"> 取消 </el-button>
                        <el-button type="primary" @click="apiSaveCourseGraph"> 确认 </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import GraphView from '@/components/GraphView.vue'
import ThreeView from '@/components/teacher/ThreeView.vue'
import { ref, shallowRef, onBeforeUnmount, computed, defineProps } from 'vue'
import { CaretRight, CaretBottom } from '@element-plus/icons-vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import api from '@/api/index'
import '@wangeditor/editor/dist/css/style.css'
const props = defineProps(['id']);
const activeName = ref('0')
const activeOutline = ref(null)
const innerActiveNames = ref([]);
const dialogShow = ref(false);
const chapterShow = ref(false);
const sectionShow = ref(false);
const pointShow = ref(false);
const outlineShow = ref(true);
const graphShow = ref(false);
const threeShow = ref(false);
const dialogTitle = ref('新增章')
const editorTitle = ref('章描述')
const list = ref([0, 1, 2, 3, 4, 5]);
const iconActive = ref(Array(list.value.length).fill(false))
const politics = ref(0)
const courseGraphList = ref([])
const saveChapterParams = ref({})
const saveSectionParams = ref({})
const savePointParams = ref({})
const courseTargetList = ref([])
const teachingModes = ref([{ key: '章节式教学', value: '章节式教学' }, { key: '项目式教学', value: '项目式教学' }])

const editorRef = shallowRef();

const toolbarConfig = {
    excludeKeys: ["uploadVideo", "fullScreen"],
};
const editorConfig = ref({
    placeholder: "请输入内容详情...",
    MENU_CONF: {}
});
const apiCourseGraphList = async () => {
    let res = await api.course_graphList({
        page: 1, limit: 5, crouse_id: props.id
    })
    courseGraphList.value = res.data.data.list
}
apiCourseGraphList()

const apiCourseTargetList = async () => {
    let res = await api.course_courseTargetList({ courseId: props.id })
    courseTargetList.value = res.data
}
apiCourseTargetList()

const apiSaveCourseGraph = async () => {
    dialogShow.value = false
    let saveParams = {}
    if (chapterShow.value) {
        saveParams.depart_level = 0
        saveParams = { crouse_id: props.id, ...saveChapterParams.value }
    }
    if (sectionShow.value) {
        saveParams = { crouse_id: props.id, ...saveSectionParams.value }
        saveParams.desc = saveChapterParams.value.desc
        saveParams.depart_level = 1
    }
    if (pointShow.value) {
        saveParams = { crouse_id: props.id, ...savePointParams.value }
        saveParams.desc = saveChapterParams.value.desc
        saveParams.depart_level = 2
    }
    if (saveParams.id) {
        await api.course_graphUpdate(saveParams)
    } else {
        await api.course_graphAdd(saveParams)
    }
    saveChapterParams.value = {}
    saveSectionParams.value = {}
    savePointParams.value = {}
    apiCourseGraphList()
}

const deologicalTargetChange = (value) => {
    politics.value = value
    savePointParams.value.ideological_target = value == 0 ? '知识点' : '思政点'
}

const isChapterActive = computed(() => (index) => {
    return activeOutline.value === index
})
const isSectionActive = computed(() => (chapterIndex, sectionIndex) => {
    return innerActiveNames.value.includes(`${chapterIndex}-${sectionIndex}`)
})
const handleCreated = (editor) => {
    editorRef.value = editor;
};

const handleClick = (index) => {
    if (index.props.name == 0) {
        outlineShow.value = true
        graphShow.value = false
        threeShow.value = false
    } else if (index.props.name == 1) {
        outlineShow.value = false
        graphShow.value = true
        threeShow.value = false
    } else if (index.props.name == 2) {
        outlineShow.value = false
        graphShow.value = false
        threeShow.value = true
    }
}
const openOutline = (index) => {
    for (var i = 0; i < iconActive.value.length; i++) {
        if (i != index) {
            iconActive.value[i] = false
        } else {
            iconActive.value[i] = true
        }
    }
    if (index === null) {
        innerActiveNames.value = []
    }
}
const addChapter = () => {
    editorTitle.value = '章描述'
    dialogTitle.value = '新增章'
    dialogShow.value = true
    chapterShow.value = true
    sectionShow.value = false
    pointShow.value = false
}

const editChapter = (item) => {
    editorTitle.value = '章描述'
    dialogTitle.value = '编辑章'
    dialogShow.value = true
    chapterShow.value = true
    sectionShow.value = false
    pointShow.value = false
    saveChapterParams.value = item
    console.log(saveChapterParams.value)
}

const addSection = (id) => {
    editorTitle.value = '节描述'
    dialogTitle.value = '新增节'
    dialogShow.value = true
    chapterShow.value = false
    sectionShow.value = true
    pointShow.value = false
    saveSectionParams.value.parent_id = id
}

const editSection = (item) =>{
    editorTitle.value = '节描述'
    dialogTitle.value = '编辑节'
    dialogShow.value = true
    chapterShow.value = false
    sectionShow.value = true
    pointShow.value = false
    saveSectionParams.value = item
    saveChapterParams.value.desc = item.desc
}


const addPoint = (id) => {
    editorTitle.value = '知识点描述'
    dialogTitle.value = '新增知识点'
    dialogShow.value = true
    chapterShow.value = false
    sectionShow.value = false
    pointShow.value = true
    savePointParams.value.parent_id = id
}

const editPoint = (item) => {
    console.log(item)
    editorTitle.value = '知识点描述'
    dialogTitle.value = '编辑知识点'
    dialogShow.value = true
    chapterShow.value = false
    sectionShow.value = false
    pointShow.value = true
     savePointParams.value = item
    saveChapterParams.value.desc = item.desc
}


const deleteIem =async (id) =>{
    await api.course_graphDele({id})
    apiCourseGraphList()
}


onBeforeUnmount(() => {
    if (!editorRef.value) return;
    editorRef.value.destroy();
});

const politicsStyle = computed(() => ({
    width: `50%`,
    transform: `translateX(${politics.value * 100}%)`
}));

</script>
<style scoped>
:deep(.el-collapse-item__arrow) {
    display: none;
}

:deep(.el-tabs__item.is-active) {
    color: #1465E1;
}

:deep(.el-tabs__item:hover) {
    color: #1465E1;
}

:deep(.el-tabs__active-bar) {
    background: #1465E1;
    padding: 1px;
    border-radius: 2px;
}

.el-collapse-item__arrow {
    display: none;
}

.el-collapse-item__arrow {
    display: none;
}

.el-collapse-icon-position-right .el-collapse-item__header {
    border: none !important
}

.el-collapse-item__wrap {
    border: none !important
}

.el-collapse-item__content {
    padding-bottom: 0 !important;
}

.graph-box .el-select {
    width: 100%;
}

.chapter-right .addpeer {
    border: 1px solid #1465E1 !important;
}

.chapter-right .addchild {
    border: 1px solid #20AB62 !important;
}

.chapter-right .edit {
    border: 1px solid #1465E1 !important;
}

.chapter-right .dele {
    border: 1px solid #D4424A !important;
}

.chapter-right .addpoint {
    border: 1px solid #D4A51D !important;
}

.graph-box {
    width: 100%;
    background: #fff;
    padding-bottom: 30px;
    display: flex;
    flex-direction: row;
    padding-top: 10px;
}

.tabs-box {
    display: flex;
    flex-direction: column;
    margin-left: 40px;
    width: 100%;
}

.tabs-box .outline-box {
    width: calc(100% - 40px);
}

.tabs-box .outline-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.chapter {
    padding: 0 20px 0 20px;
}

.tabs-box .outline-title .chapter-left {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.tabs-box .outline-title .chapter-icon {
    width: 25px;
    height: 25px;
    border-radius: 20px;
    background: linear-gradient(135deg, #2E7CF4 0%, #0457D5 100%);
    color: #fff;
    text-align: center;
    line-height: 25px;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    font-size: 12px;
    margin-left: 5px;
}

.tabs-box .outline-title .chapter-title {
    margin-left: 5px;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    font-size: 14px;
}

.chapter-right span {
    margin-left: 5px;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    font-size: 14px;
}

.chapter-right .addpeer span {
    color: #1465E1;
}

.chapter-right .addchild span {
    color: #20AB62;
}

.chapter-right .edit span {
    color: #1465E1;
}

.chapter-right .dele span {
    color: #D4424A;
}

.chapter-right .addpoint span {
    color: #D4A51D;
}

.chapter-right img {
    width: 20px;
    height: 20px;
}

.section {
    padding: 10px 20px 10px 50px;
    background-color: #ffffff !important;
}

.point {
    padding: 20px 20px 10px 100px;
    background-color: #F3F7FE;
}

.point .chapter-icon {
    width: 50px !important;
    background: linear-gradient(135deg, #2E7CF4 0%, #0457D5 100%) !important;
}

.point .chapter-icon.orange {
    background: linear-gradient(135deg, #D4A51D 0%, #D4721D 100%) !important;
}

.chapter-list:nth-of-type(odd) :deep(.el-collapse-item__header) .outline-title {
    background-color: #F3F7FE;
}

.chapter-list:nth-of-type(even) :deep(.el-collapse-item__header) .outline-title {
    background-color: #ffffff;
}

.chapter-list:nth-of-type(even) .section {
    background-color: #F3F7FE !important;
}

.chapter-list:nth-of-type(even) .point {
    background-color: #fff !important;
}

.dialog-content {
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.dialog-content .form-list {
    width: 48%;
}

.dialog-content .form-list {
    display: flex;
    flex-direction: column;
}

.dialog-content .form-list .form-item {
    margin-top: 20px;
}

.dialog-content .form-list .form-item .items {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.dialog-content .form-list .text {
    font-size: 14px;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
}

.dialog-content .form-list .form-item .items .reds {
    color: red;
    margin-left: 5px;
}

.dialog-content .form-list .form-item .inputs {
    margin-top: 10px;
}

.dialog-content .form-list .form-item .study {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.class-hour {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

.class-hour span {
    margin-left: 10px;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    font-size: 14px;
    color: #9397A5;
}

.editor {
    margin-top: 20px;
}

.class-switch {
    position: relative;
}

.class-switch .switch-item {
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
    text-align: center;
    color: #7f8c8d;
    z-index: 2;
}

.slider {
    border-radius: 35px;
    height: 35px;
    background: #3869E7;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    position: absolute;
    top: 0;
}

.switch-item.active {
    color: white;
}

.mode-1 {
    background: #1465E1;
}

.mode-2 {
    background: #1465E1;
}

.form-item .class-switch {
    display: flex;
    flex-direction: row;
    width: 40%;
    background: #F7F7F7;
    border-radius: 40px;
    margin-top: 10px;
}

.form-item .class-switch .switch-item {
    width: 50%;
    height: 35px;
    line-height: 35px;
}
</style>